<template>
  <div id="app">
    <h2>请输入您的姓名和年龄</h2>
    <form>
      <input type="text" v-model="name"> <br/>
      <input type="text" v-model="age">
    </form>
    <button @click="requestByGet">GET</button>
    <button @click="requestByPost">POST</button>
    <button @click="requestByPostJson">POSTByJson</button>
    <p>{{msg}}</p>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://demo-api.geekfun.website';

export default {
      data() {
        return {
          msg: '',
          name: '',
          age: ''
        }
      },
      methods: {
        requestByGet() {
          axios.get(
            '/vue-bs/get-vs-post.aspx', 
            {
              params: {
                name: this.name,
                age: this.age
              }
            }
          )
          .then((response) => this.msg = response.data)
          .catch((error) => console.log(error));
        },
        requestByPost() {
          let data = new FormData();
          data.append('name', this.name);
          data.append('age', this.age);

          axios.post(
            '/vue-bs/get-vs-post.aspx', 
            data
          )
          .then((response) => this.msg = response.data)
          .catch((error) => console.log(error));
        },
        requestByPostJson() {
          axios.post(
            '/vue-bs/get-vs-post.aspx', 
            {name:this.name, age:this.age}
          )
          .then((response) => this.msg = response.data)
          .catch((error) => console.log(error));
        }
      }
}
</script>
